<template>
	<div class="sys-file-container">
		<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" :append-to-body="true" width="580px">
		<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
					<span> {{ props.title }} </span>
				</div>
			</template>
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
				<el-row>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<a>上级类型:</a>
							<el-select v-model="state.ruleForm.parentId" placeholder="请选择上级类型" clearable>
								<el-option
								      v-for="item in state.filetypeData"
								      :key="item.id"
								      :label="item.name"
								      :value="item.id"
								    />
							</el-select>
							</el-col>
							
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="类型名称" prop="name" :rules="[{ required: true, message: '类型名称不能为空', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.name" placeholder="类型名称" clearable />
						</el-form-item>
						<el-form-item label="英文名称" prop="enName" >
							<el-input v-model="state.ruleForm.enName" placeholder="英文名称" clearable />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<span class="deltype" ><el-button v-show="state.isshowdelbtn" type="danger" @click="deletefiletype" >删 除</el-button></span>
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="sysEditFile">
import { ref,reactive,onMounted } from "vue";
import { ElMessage,ElMessageBox } from 'element-plus';
import { getFileType,addFileType,editFileType,deleteFileType} from '/@/api/system/fileType';

import { getAPI } from '/@/utils/axios-utils';
import { SysFileApi } from '/@/api-services/api';
import { FileInput } from '/@/api-services/models';

const props = defineProps({
	title: String,
	sysFileId: Number,
});
const emits = defineEmits(['handleQuery','initTreeData']);
const ruleFormRef = ref();
const state = reactive({
	isShowDialog: false,
	ruleForm: {id:''} as any,
	filetypeData:[],
	 isshowdelbtn:false,
});
// 打开弹窗
const openDialog = (row: any) => {
	state.ruleForm = JSON.parse(JSON.stringify(row));
	handleQueryFileType();
	state.ruleForm.parentId=parseInt(state.ruleForm.parentId) ;
	if(state.ruleForm.id){
		state.isshowdelbtn=true;
	}
	state.isShowDialog = true;
	ruleFormRef.value?.resetFields();
};

// 关闭弹窗
const closeDialog = () => {
	emits('handleQuery');
	state.isShowDialog = false;
	state.isshowdelbtn=false;
};
//查询文件类型
	const handleQueryFileType = async () => {
			var res = await getFileType();
			state.filetypeData = res.data.result?? [];
		};
// 取消
const cancel = () => {
	state.isShowDialog = false;
};
const deletefiletype=()=>{
	ElMessageBox.confirm(`确定删除文件类型：【${state.ruleForm.name}】?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			var rsp=await deleteFileType(state.ruleForm);
			if (rsp.data.code == 200) {
				ElMessage.success('文件类型删除成功！');
				emits('initTreeData');
			} else {
				ElMessage.error('文件类型删除失败：' + rsp.data.message);
			}
			emits('initTreeData');
		})
		.catch(() => {});
	
};
// 提交
const submit = async () => {
  ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
    if (isValid) {
      let values = state.ruleForm;
      if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
         var rsp= await editFileType(values);
		if (rsp.data.code == 200) {
			ElMessage.success('文件类型修改成功！');
		} else {
			ElMessage.error('文件类型修改失败：' + rsp.data.message);
		}
      } else {
      var rsp= await addFileType(values);
		if (rsp.data.code == 200) {
			ElMessage.success('文件类型新增成功！');
		} else {
			ElMessage.error('文件类型新增失败：' + rsp.data.message);
		}
      }
	  emits('initTreeData');
      closeDialog();
    } else {
      ElMessage({
        message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
        type: "error",
      });
    }
  });
};


// 导出对象
defineExpose({ openDialog });
</script>
<style>
	.deltype{
		padding-right: 355px;
	}
</style>
